<template>
    <div class="loginView">
        <div class="container">
            <div class="title">登&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;录</div>
            <div class="formBox">
                <form>
                    <div class="inputBox">
                        <span>手机号：</span>
                        <input type="text" name="phoneNumber" v-model="form.phoneNumber" placeholder="请输入手机号" />
                    </div>
                    <div class="inputBox">
                        <span>密码：</span>
                        <input type="password" name="password" v-model="form.password" placeholder="请输入密码" />
                    </div>
                    <div class="inputBox">
                        <span>验证码：</span>
                        <input type="text" v-model="form.checkCode" placeholder="请输入验证码" />
                        <div class="checkCode" @click="ChangeCheckCode">
                            <img width="100%" :src="form.verifyCode.code" alt="验证码" />
                        </div>
                    </div>

                    <!-- 登录选项 -->
                    <div class="option">
                        <div class="automatic">
                            <label class="checkbox">
                                <input type="checkbox" />
                                <span>自动登录</span>
                            </label>
                        </div>
                        <router-link to="/loginRegister/forgetPassword" class="forgetPassword">忘记密码</router-link>
                    </div>
                    <div class="message" v-if="form.message.length > 0">{{ form.message }}</div>
                    <div class="inputBox">
                        <div class="btn" @click="Login">登&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;录</div>
                    </div>

                    <!-- 协议 -->
                    <div class="protocol">
                        <label class="checkbox">
                            <input type="checkbox" v-model="form.option.protocol" />
                            <span>
                                已同意
                                <router-link to="/user/agreement">《本平台用户协议》</router-link>
                                和
                                <router-link to="/user/agreement">《本平台隐私政策》</router-link>
                            </span>
                        </label>
                    </div>
                </form>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { onMounted, reactive } from 'vue';
import { codeApi, userApi } from '@/api/Users';

import { useRouter } from 'vue-router';

export default {
    name: 'loginView',
}
</script>

<script setup lang="ts">

    const router = useRouter();

    const form = reactive({
    	phoneNumber: '13574378538', // 用户名
    	password: '1111', // 密码
    	checkCode:'', // 验证码
        verifyCode: {  // 验证码图片
            code: '',
            sessionId: ''
        },
    	message:'', // 错误信息
    	option:  // 登录选项
        {
            // 自动登录
            automatic: false,
            // 同意协议
            protocol: false
        }
    });

    onMounted(() => {
        ChangeCheckCode();
    });
    //图片点击事件
    const ChangeCheckCode = () => {
        form.checkCode = '';
        codeApi.getImageCode().then(res => {
            form.verifyCode.code = res.data.code;
            form.verifyCode.sessionId = res.data.sessionId;
        });
    }
    
    // 登录方法
    const Login = async () => {
        // SignUtil.clearUser(); // 清除之前的用户信息
        form.message = '';
        
        if (!form.option.protocol) {
            form.message = '请先同意协议';
            return;
        }

        try {
            await userApi.login({
                phoneNumber: form.phoneNumber,
                password: form.password,
                code: {
                    code: form.checkCode,
                    sessionId: form.verifyCode.sessionId
                }
            }).then(res => {
                form.message = res.message;
                if (res.code === 200) {
                    // 登录成功
                    console.log('登录成功');
                    router.push('/'); // 跳转到首页
                } else {
                    // 登录失败
                    console.log('登录失败');
                    // 更新验证码
                    ChangeCheckCode();
               }
            });
        } catch (error) {
            console.error('Login error:', error);
            form.message = '登录失败，请稍后重试';
        }
    };
</script>

<style scoped>
.loginView {
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.loginView .container {
    height: 100%;
}

.loginView .container .title {
    width: 100%;
    height: 33px;
    font-size: 22px;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 表单 */
.loginView .container .formBox {
    width: 100%;
    height: calc(100% - 35px);
    display: flex;
    justify-content: center;
    align-items: center;
}
.loginView .container form {
    width: 400px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}

/* 宽度 */
.loginView .container form .inputBox,
.loginView .container form .message,
.loginView .container form .option,
.loginView .container form .protocol {
    width: 350px;
}

/* 输入框盒子 */
.loginView .container form .inputBox {
    padding: 20px 0px;
    font-size: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 错误信息 */
.loginView .container form .message {
    margin-top: 15px;
    font-size: 14px;
    color: rgba(255, 0, 0, 1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 链接 */
.loginView .container form a {
    color: rgba(65, 185, 255, 1);
    transition: .3s all;
}
.loginView .container form a:hover {
    color: rgb(0, 162, 255);
}
.loginView .container form a:active {
    color: rgba(65, 185, 255, 1);
    transition: .1s all;
    font-weight: lighter;
}

/* 输入框 */
.loginView .container form .inputBox span {
    min-width: 70px;
}
.loginView .container form .inputBox input {
    width: 100%;
    height: 35px;
    font-size: 16px;
    border: 2px solid rgba(200, 200, 200, 1);
    border-radius: 5px;
    padding: 0px 10px;
    outline: none;
}
.loginView .container form .inputBox input:focus {
    border: 2px solid rgba(65, 185, 255, 1);
}

/* 验证码图片 */
.loginView .container form .inputBox .checkCode {
    min-width: 100px;
    height: 35px;
    overflow: hidden;
    border: 2px solid rgba(200, 200, 200, 1);
    border-radius: 5px;
    margin-left: 10px;
    transition: .3s all;
    display: flex;
    justify-content: center;
    align-items: center;
}
.loginView .container form .inputBox .checkCode:hover {
    border: 2px solid rgba(65, 185, 255, 1);
}

/* 登录选项 */
.loginView .container form .option {
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.loginView .container form .option .automatic {
    max-width: calc(100% - 130px);
}
.loginView .container form .option .forgetPassword {
    font-size: 14px;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 复选框 */
.loginView .container form .checkbox {
    padding-left: 3px;
    width: 100%;
    height: 35px;
    font-size: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.loginView .container form .checkbox input {
    width: 12px;
    height: 12px;
}
.loginView .container form .checkbox input:before {
  content: "";
  display: inline-block;
  width: 100%;
  height: 100%;
  font-size: 12px;
  font-weight: bold;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 1);
  outline: 3px solid rgba(180, 180, 180, 1);
}
.loginView .container form .checkbox input:checked:before {
  content: "\2713";
  color: rgba(65, 185, 255, 1);
  outline: 3px solid rgba(65, 185, 255, 1);
}
.loginView .container form .checkbox span {
    padding-left: 10px;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 登录按钮 */
.loginView .container form .btn {
    width: 100%;
    height: 40px;
    background-color: rgba(65, 185, 255, 1);
    border-radius: 5px;
    color: white;
    font-size: 16px;
    transition: .3s all;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.loginView .container form .btn:hover {
    font-size: 18px;
    background-color: rgb(0, 162, 255);
}
.loginView .container form .btn:active {
    font-size: 16px;
    transition: .1s all;
    background-color: rgba(65, 185, 255, 1);
}

/* 同意协议选择框 */
.loginView .container form .protocol {
    height: 35px;
    margin-bottom: 20px;
    font-size: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>